<template>
  <Modal
    :active="splitModalActive"
    transfer
    title="网格分割"
    hide-mask
    :width="650"
    draggable
    :no-footer="true"
    @close="closeBtn"
  >
    <div class="box">
      <div class="option-row">
        <Checkbox v-model:checked="edgesChecked">Edges</Checkbox>
        <div class="edge-options">
          <div
            v-for="(_, key) in edgeOptions"
            :key="key"
            class="edge-button"
            :class="{ active: edgeOptions[key] }"
            @click="edgeOptions[key] = !edgeOptions[key]"
          >
            <img src="../../assets/delete.svg" alt="" class="icon" />
          </div>
        </div>
      </div>
      <div class="option-row">
        <Checkbox v-model:checked="vertexChecked">节点</Checkbox>
        <div class="vertex-options">
          <div
            class="edge-button"
            :class="{ active: vertexOption }"
            @click="vertexOption = !vertexOption"
          >
            <img src="../../assets/delete.svg" alt="" class="icon" />
          </div>
        </div>
      </div>
      <div class="foot-box">
        <Button type="primary" size="small" @click="confirm">确定</Button>
        <Button type="default" size="small" @click="closeBtn">取消</Button>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { Modal, Checkbox, Button } from "cax-ui";
import { useMeshEditStore } from "@/UI/store/meshEditStore";
import { storeToRefs } from "pinia";
import { ref, reactive, watch } from "vue";

const meshEditStore = useMeshEditStore();
const { splitModalActive } = storeToRefs(meshEditStore);

const edgesChecked = ref(false);
const edgeOptions = reactive({
  option1: false,
  option2: false,
  option3: false,
  option4: false,
  option5: false,
});

const vertexChecked = ref(false);
const vertexOption = ref(false);

// 方式1：通过watch监听变化
watch([edgesChecked, edgeOptions, vertexChecked, vertexOption], () => {
  const selectedData = {
    edges: {
      enabled: edgesChecked.value,
      options: Object.entries(edgeOptions)
        .filter(([_, value]) => value)
        .map(([key]) => key),
    },
    vertex: {
      enabled: vertexChecked.value,
      selected: vertexOption.value,
    },
  };
  console.log("Selected data:", selectedData);
});

// 方式2：在确认时获取数据
function confirm() {
  const selectedData = {
    edges: {
      enabled: edgesChecked.value,
      options: Object.entries(edgeOptions)
        .filter(([_, value]) => value)
        .map(([key]) => key),
    },
    vertex: {
      enabled: vertexChecked.value,
      selected: vertexOption.value,
    },
  };
  console.log("selectedData97", selectedData);

  // 可以发送到store或者直接处理
  meshEditStore.handleSplitOptions(selectedData);

  splitModalActive.value = false;
}

function closeBtn() {
  splitModalActive.value = false;
}
</script>

<style lang="less" scoped>
.box {
  padding: 16px;

  .option-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .edge-options,
    .vertex-options {
      display: flex;
      gap: 8px;
      margin-left: 16px;
    }

    .edge-button {
      width: 32px;
      height: 32px;
      border: 1px solid #dcdee0;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        border-color: #40a9ff;
      }

      &.active {
        background-color: #e6f7ff;
        border-color: #40a9ff;
      }

      .icon {
        width: 16px;
        height: 16px;
      }
    }
  }
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
</style>
